<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>03_变换</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body{
				background: gray;
			}
			#test{
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				background:white;
			}
		</style>
	</head>
	<body>
		<canvas id="test" width="300" height="300"></canvas>
	</body>
	<script type="text/javascript">
		
		window.onload=function(){
			var flag =0;
			var scale = 0;
			var flagScale = 0; // 缩放步长
			var canvas = document.querySelector("#test");
			if(canvas.getContext){
				var ctx = canvas.getContext("2d");
				
				ctx.save();//保存默认的样式
				ctx.translate(150,150); //移动坐标原点
				
				ctx.beginPath(); 
				ctx.fillRect(-50,-50,100,100); //绘制矩形
				ctx.restore(); // 保存当前样式
				
				// 定时器
				setInterval(function(){
					flag++;
					
					// 清除画布
					ctx.clearRect(0,0,canvas.width,canvas.height);
					ctx.save();
					ctx.translate(150,150); // 移动坐标原点
					ctx.rotate(flag*Math.PI/180); // 旋转角度
					
					// 放大比例为100
					if(scale==100){
						flagScale=-1; // 缩小
					}else if(scale==0){
						flagScale=1; // 放大
					}
					scale+=flagScale;
					ctx.scale(scale/50,scale/50); // 缩放
					
					ctx.beginPath();
					ctx.fillRect(-50,-50,100,100); // 重新绘制矩形
					ctx.restore();
				},1000/60)
			}
		}
		
	</script>
</html>
